<template>
  <div class="authority-config-details-container">
    <SubPageHeader :subPageHeaderOptions="subPageHeaderOptions" />

    <div class="details-wrapper">
      <div class="details-wrapper-left scroll-bar">
        <!-- PC端 -->
        <PcMenu v-if="show" />

        <!-- 移动端 -->
        <AppMenu v-if="show" />
      </div>

      <!-- 内容区 -->
      <FuncList :tableData="tableData" />
    </div>
  </div>
</template>

<script>
import SubPageHeader from '@/components/SubPageHeader';
import PcMenu from './components/PcMenu.vue';
import AppMenu from './components/AppMenu.vue';
import FuncList from './components/FuncList.vue';

export default {
  name: 'AuthorityConfigDetails',
  components: {
    SubPageHeader,
    PcMenu,
    AppMenu,
    FuncList
  },
  provide() {
    return {
      parent: this
    };
  },
  data() {
    return {
      subPageHeaderOptions: {
        //头部配置
        title: '',
        buttons: []
      },
      show: true,
      tableData: []
    };
  },
  created() {
    this.subPageHeaderOptions.title = this.$route.query.chName || '';
    this.$store.commit('appMenu/resetState');
  }
};
</script>

<style lang="scss" scoped>
.authority-config-details-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .details-wrapper {
    flex: 1;
    display: flex;
    height: 0;

    .details-wrapper-left {
      flex-shrink: 0;
      width: 320px;
      height: 100%;
      border-right: 1px solid #ebeef5;
      overflow-y: auto;
    }
  }
}
</style>
